<template>
	<view class="container">
		<view class="bg-rectangle"></view>
		<view class="header-box">
			<text class="hello-text">Hello !</text>
			<view class="header-sub">欢迎来到有解，获取更多机会</view>
		</view>
		<view class="login-box">
			<view class="login-box-bg"></view>
			<up-form class="login-form" :model="formData" labelPosition="top" labelWidth="auto" :labelStyle="lableStyle">
				<up-form-item label="手机号">
					<up-input
						v-model="formData.phoneNumber"
						shape="circle"
						placeholder="请输入手机号"
						:customStyle="inputStyle"
						border="none"
						:placeholderStyle="placeholderStyle"
					></up-input>
				</up-form-item>
				<up-form-item label="验证码">
					<up-input
						v-model="formData.code"
						shape="circle"
						placeholder="请输入验证码"
						:customStyle="inputStyle"
						border="none"
						:placeholderStyle="placeholderStyle"
					></up-input>
				</up-form-item>
			</up-form>
			<up-button open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="getAuthorization" text="登录"></up-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive } from 'vue';
import type { LoginFormDataType } from './loginType.ts';

// 解决样式隔离问题，不然uview-plus无法给ui组件自定义class
defineOptions({
	options: {
		styleIsolation: 'shared'
	}
});

// label样式
const lableStyle = {
	fontSize: '32rpx',
	fontWeight: 'bold',
	color: '#333333',
	marginBottom: '20rpx'
};

// 输入框样式
const inputStyle = {
	padding: '10px 35rpx',
	backgroundColor: '#fff'
};

// 提示文本样式
const placeholderStyle = {
	color: '#999'
};

// 表单数据
const formData = reactive<LoginFormDataType>({
	phoneNumber: '',
	code: ''
});

// 获取登录用户信息
const getUserInfo = (detail) => {
	debugger;
};

const getAuthorization = (a) => {
	debugger;
	// uni.login({
	// 	provider: 'weixin',
	// 	success: (res) => {
	// 		uni.getUserInfo({
	// 			provider: 'weixin',
	// 			success: (res) => {
	// 				console.log('user', res);
	// 			},
	// 			fail: (err) => {
	// 				console.log('未授权')
	// 			}
	// 		});
	// 	}
	// });
};
</script>

<style lang="scss">
$whiteBg: #fff;
.container {
	position: relative;
	width: 100vw;
	height: 100vh;
	background-color: #00cb6b;

	.bg-rectangle {
		position: absolute;
		top: -10%;
		left: -30%;
		width: 40%;
		height: 90%;
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), transparent);
		transform: rotate(-46.4deg);
		transform-origin: top;
	}

	.header-box {
		position: absolute;
		top: 15%;
		left: 0;
		transform: translateY(-50%);
		width: 100%;
		padding-left: 45rpx;
		color: $whiteBg;
		background-color: transparent;
		box-sizing: border-box;
		.hello-text {
			display: block;
			font-size: 2rem;
			font-weight: bolder;
		}
		.header-sub {
			font-size: 1rem;
			margin-top: 0.75rem;
			letter-spacing: 2px;
		}
	}

	.login-box {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 75%;
		border-radius: 45rpx 45rpx 0 0;
		background-color: $whiteBg;

		&-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 45rpx 45rpx 0 0;
			background-image: radial-gradient(circle at top left, rgba(61, 215, 142, 0.15), transparent),
				radial-gradient(circle at top right, rgba(233, 255, 135, 0.15), transparent);
		}

		.login-form {
			position: relative;
			padding: 10% 60rpx;
		}
	}
}
</style>
